<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/css/layui.css"
          media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/public.css" media="all">
    <style>
        .thumbBox{ height:200px; overflow:hidden; border:1px solid #e6e6e6; border-radius:2px; cursor:pointer; position:relative; text-align:center; line-height:200px;width: 210px;}
        .thumbImg{ max-width:100%; max-height:100%; border:none;}
        .thumbBox:after{ position:absolute; width:100%; height:100%;line-height:200px; z-index:-1; text-align:center; font-size:20px; content:"缩略图"; left:0; top:0; color:#9F9F9F;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <%-- 搜索条件 --%>
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">房间编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="roomNo" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">房间类型</label>
                            <div class="layui-input-inline">
                                <select name="roomTypeId" id="s_roomTypeId" autocomplete="off" class="layui-input">
                                    <option value="">全部</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">所属楼层</label>
                            <div class="layui-input-inline">
                                <select name="floorId" id="s_floorId" autocomplete="off" class="layui-input">
                                    <option value="">全部</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">房间状态</label>
                            <div class="layui-input-inline">
                                <select name="status" id="s_status" autocomplete="off" class="layui-input">
                                    <option value="">全部</option>
                                    <option value="1">空闲</option>
                                    <option value="2">已预定</option>
                                    <option value="3">已入住</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn"><i
                                    class="layui-icon layui-icon-search"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-warm"><i
                                    class="layui-icon layui-icon-refresh-1"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <%-- 表格工具栏 --%>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"><i
                        class="layui-icon layui-icon-add-1"></i>添加
                </button>
            </div>
        </script>

        <%-- 数据表格 --%>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <%-- 行工具栏 --%>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit"><i
                    class="layui-icon layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete"><i
                    class="layui-icon layui-icon-close"></i>删除</a>
        </script>

        <%-- 添加和修改窗口 --%>
        <div style="display: none;padding: 5px" id="addOrUpdateWindow">
            <form class="layui-form" style="width:90%;" id="dataFrm" lay-filter="dataFrm">
                <!-- 隐藏域，保存房型id -->
                <input type="hidden" name="id">
                <div class="layui-col-md12 layui-col-xs12">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md9 layui-col-xs7">
                            <div class="layui-form-item magt3" style="margin-top: 8px;">
                                <label class="layui-form-label">房间编号</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" name="roomNo" lay-verify="required"  placeholder="请输入房间编号">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">房间类型</label>
                                <div class="layui-input-block">
                                    <select name="roomTypeId" lay-filter="roomTypeId" id="roomTypeId" lay-verify="required">
                                        <option value="">请选择房型</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">房间备注</label>
                                <div class="layui-input-block">
                                    <textarea class="layui-textarea" name="remark" id="remark"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3 layui-col-xs5">
                            <div class="layui-upload-list thumbBox mag0 magt3">
                                <input type="hidden" name="photo" id="photo" value="">
                                <img class="layui-upload-img thumbImg" id="uploadPhoto" src="/hotel/show/images/暂无图片.jpg">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item magb0">
                        <div class="layui-inline">
                            <label class="layui-form-label">所属楼层</label>
                            <div class="layui-input-inline">
                                <select name="floorId" id="floorId" lay-verify="required">
                                    <option value="">请选择楼层</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">房间状态</label>
                            <div class="layui-input-inline">
                                <select name="status" id="status" lay-verify="required">
                                    <option value="">请选择房间状态</option>
                                    <option value="1">空闲</option>
                                    <option value="2">已预定</option>
                                    <option value="3">已入住</option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">房间要求</label>
                        <div class="layui-input-block" >
                            <textarea id="roomRequirement" name="roomRequirement" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">房间详情</label>
                        <div class="layui-input-block">
                            <textarea id="roomDesc" name="roomDesc" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item magt3" style="margin-top: 8px;">
                        <label class="layui-form-label" style="color: #EF4E33">预定人姓名</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="userName" lay-verify="required"  placeholder="">
                        </div>
                    </div>
                    <div class="layui-form-item magt3" style="margin-top: 8px;">
                        <label class="layui-form-label" style="color: #EF4E33">预定人留言</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="userMsg" lay-verify="required"  placeholder="">
                        </div>
                    </div>



                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center;">
                            <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit" id="doSubmit"><span
                                    class="layui-icon layui-icon-add-1"></span>提交
                            </button>
                            <button type="reset" class="layui-btn layui-btn-warm"><span
                                    class="layui-icon layui-icon-refresh-1"></span>重置
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<script src="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'laydate', 'jquery', 'layer','upload','layedit'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            layedit = layui.layedit,
            layer = layui.layer,
            table = layui.table;

        //渲染表格组件
        var tableIns = table.render({
            elem: '#currentTableId',
            url: '${pageContext.request.contextPath}/admin/room/list',
            toolbar: '#toolbarDemo',
            cols: [[
                {field: 'id', width: 60, title: '编号', align: "center"},
                {field: 'roomNo', minWidth: 120, title: '房间编号', align: "center"},
                {field: 'typeName', minWidth: 100, title: '房间类型', align: "center"},
                {field: 'name', minWidth: 100, title: '所属楼层', align: "center"},
                {field: 'status', minWidth: 100, title: '房间状态', align: "center",templet:function (d) {
                    switch (d.status) {
                        case 1:return "<span style='color: green'>空闲</span>"
                        case 2:return "<span style='color: #FFB800'>已预订</span>"
                        case 3:return "<span style='color: red'>已入住</span>"
                    }
                    return "";
                }},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            initSort: {
                field: 'roomNo' //排序字段，对应 cols 设定的各字段名
                ,type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            },
            page: true,
            done: function (res, curr, count) {
                //判断当前页码是否是大于1并且当前页的数据量为0
                if (curr > 1 && res.data.length == 0) {
                    var pageValue = curr - 1;
                    //刷新数据表格的数据
                    tableIns.reload({
                        page: {curr: pageValue}
                    });
                }
            }
        });

        //渲染房间类型下拉菜单
        $.get("/admin/roomType/findAll",function(result){
            var html="";
            for (var i = 0; i <result.length; i++) {
                html+="<option value="+result[i].id+"\>"+result[i].typeName+"</option>";
            }
            $("#s_roomTypeId").append(html);
            $("#roomTypeId").append(html);
            form.render('select');
        },"json");
        //渲染楼层名称下拉菜单
        $.get("/admin/floor/findAll",function(result){
            var html="";
            for (var i = 0; i <result.length; i++) {
                html+="<option value="+result[i].id+"\>"+result[i].name+"</option>";
            }
            console.log(html);
            $("#s_floorId").append(html);
            $("#floorId").append(html);
            form.render('select');
        },"json");
        // // 渲染图片上传区域
        // upload.render({
        //         elem: "#uploadPhoto",//绑定元素
        //         url: "/admin/roomType/uploadFile",//请求地址
        //         acceptMime: "image/*",//可以上传的文件类型（图片）
        //         field: "attach",//文件上传的字段值，等同于input中的name属性，controller的参数要与这个一致
        //         method: "post",//请求类型
        //         //文件上传成功后的回调函数
        //         done: function (res, index, upload) {
        //             //设置图片回显路径
        //             $("#uploadPhoto").attr("src", res.data.src);
        //             //背景调亮
        //             $('.thumbBox').css("background", "#fff");
        //             //给隐藏域赋值
        //             $("#photo").val(res.data.imagePath);
        //         }
        // })

        //监听表单的房间类型选项
        form.on("select(roomTypeId)",function (data) {
            $.post("/admin/roomType/findRoomTypeById","roomTypeId="+data.value,function(result){
                //给图片隐藏域赋值
                $("#photo").val(result.photo);
                //给图片回显
                $("#uploadPhoto").attr("src","/hotel/show/"+result.photo);
                form.render();
            },"json");
        })


        //监听表单搜索事件
        form.on("submit(data-search-btn)",function (data) {
            table.reload("currentTableId",{
                where:data.field,
                page:{
                    curr:1//从第一页开始
                }
            })
            return false;
        })

        //监听头工具栏事件
        table.on("toolbar(currentTableFilter)",function (obj) {
            switch (obj.event) {
                case "add":
                    openAddWindow();
                    break;
            }
        })
        //监听行工具栏时间
        table.on("tool(currentTableFilter)",function (obj) {
            switch (obj.event) {
                case "edit":
                    openEditWindow(obj.data);
                    break;
                case "delete":
                    openDeleteWindow(obj.data);
                    break;
            }
        });

        var url,//请求地址
            mainIndex;//打开窗口的name

        /**
         * 打开添加窗口
         */
        function openAddWindow() {
            mainIndex=layer.open({
                type:1,
                title:"添加房间",
                area:['800px','600px'],
                content:$("#addOrUpdateWindow"),
                success:function () {
                    url="/admin/room/addRoom"//设置请求地址
                    $("#dataFrm")[0].reset();//清空表单数据
                    $("#uploadPhoto").attr("src","/hotel/show/images/暂无图片.jpg");
                    $("#photo").val("");//设置隐藏域
                }
            })
        }

        /**
         * 打开编辑窗口
         */
        function openEditWindow(data){
            mainIndex=layer.open({
                type:1,
                title:"修改房间",
                area:['800px','600px'],
                content:$("#addOrUpdateWindow"),
                success:function () {
                    url="/admin/room/updateRoom";
                    form.val("dataFrm",data);//表单数据回显
                    //给图片回显
                    if(data.photo==""||data.photo==null){
                        $("#uploadPhoto").attr("src","/hotel/show/images/暂无图片.jpg");
                    }else {
                        //照片回显
                        $("#uploadPhoto").attr("src","/hotel/show/"+data.photo);
                    }
                }
            })
        }

        /**
         * 打开删除窗口
         */
        function openDeleteWindow(data){
            mainIndex=layer.open({
                title:"删除房间",
                content:"确定要删除【<b style='color: hotpink'>"+data.roomNo+"</b>】吗？",
                btn:["<i class=\"layui-icon layui-icon-ok\"></i> 确定","<i class=\"layui-icon layui-icon-close\"></i> 取消"],
                yes:function () {
                    if(status!=1){
                        layer.msg("无法删除，该房间不在空闲状态下")
                    }else {
                        url="/admin/room/deleteRoom";
                        $.post(url,"id="+data.id,function(result){
                            if (result.success){
                                tableIns.reload()//刷新数据
                                layer.close(mainIndex);//关闭页面
                            }
                            layer.msg(result.message);//提示信息
                        },"json");
                    }
                },
                btn2:""
            })
        }

        //监听表单提交事件
        form.on("submit(doSubmit)",function (data) {
            $.post(url,data.field,function(result){
                if (result.success){
                    tableIns.reload()//刷新数据
                    layer.close(mainIndex);//关闭页面
                }
                layer.msg(result.message);//提示信息
            },"json");
            return false;
        })
    });
</script>

</body>
</html>
